#{$css-scope} {
  .primary--bg,
  .primary-dark1--bg,
  .primary-dark2--bg,
  .primary-dark3--bg {
    color: #fff;
  }
  .white--bg {
    background-color: #fff;
  }
  .white {
    color: #fff;
  }
  .grey--bg {
    background-color: #888;
  }
  .grey {
    color: #888;
  }
  .black--bg {
    background-color: #000;
  }
  .black {
    color: #000;
  }
  .transparent--bg {
    background-color: transparent;
  }
  .transparent {
    color: transparent;
  }
  .inherit--bg {
    background-color: inherit;
  }
  .inherit {
    color: inherit;
  }
  .success--bg,
  .error--bg,
  .warning--bg,
  .info--bg {
    color: #fff;
  }

  $colors: (
    "pink": #e91e63,
    "purple": #dda3e7,
    "deep-purple": #673ab7,
    "indigo": #3f51b5,
    "blue": #2196f3,
    "light-blue": #03a9f4,
    "cyan": #04cbe5,
    "teal": #1db3a8,
    "green": #4caf50,
    "light-green": #90d73f,
    "lime": #cee029,
    "yellow": #ffe70f,
    "amber": #ffc107,
    "orange": #ff9800,
    "deep-orange": #ff6825,
    "red": #fa3317,
    "brown": #845848,
    "blue-grey": #6c8693,
    "grey": #848484,
  );

  @each $label, $color in $colors {
    .#{$label}--bg {
      background-color: $color;
    }
    .#{$label} {
      color: $color;
    }

    @for $i from 1 through 5 {
      $light-increment: 8;
      // Some color shades need bigger or smaller increments to end up with the same scale.
      @if $label == "deep-orange" {
        $light-increment: 7;
      }
      @if $label == "green" or $label == "amber" {
        $light-increment: 8.3;
      }
      @if $label == "pink" or $label == "orange" {
        $light-increment: 8.5;
      }
      @if $label ==
        "cyan" or
        $label ==
        "purple" or
        $label ==
        "deep-purple" or
        $label ==
        "indigo" or
        $label ==
        "light-blue"
      {
        $light-increment: 9;
      }
      @if $label == "teal" or $label == "brown" {
        $light-increment: 10;
      }
      .#{$label}-light#{$i}--bg {
        background-color: lighten($color, $light-increment * $i);
      }
      .#{$label}-light#{$i} {
        color: lighten($color, $light-increment * $i);
      }
      .#{$label}-dark#{$i}--bg {
        background-color: darken($color, 6 * $i);
      }
      .#{$label}-dark#{$i} {
        color: darken($color, 6 * $i);
      }
    }
  }
}
